<template>
  <section>
    <el-row v-if="model === 'cascader'">
      <el-cascader :placeholder="title" :options="list"  @change="handleChange" :props="props" v-if="list" size="mini"
                   :show-all-levels="showAll"  clearable :change-on-select="changeOn" v-model="selCascder">
      </el-cascader>
    </el-row>
    <el-row v-else-if="model === 'select'">
      <el-select size="mini" :placeholder="title" @change="handleSel" v-model="selOption" clearable>
        <el-option  v-for="l in list" :key="l.id" :value="l.id" :label="l[test]"></el-option>
      </el-select>
    </el-row>
  </section>
</template>

<script>
  import errHandler from '@/assets/errHandler.js'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "filterTool",
    props:['type','test','listtest','selVal'],
    data(){
      return{
        title:'默认',
        list:null,
        props:null,
        selOption:null,
        model:'select',
        showAll:true,
        changeOn:true,
        selCascder:[]
      }
    },
    watch:{
      selVal(nv,ov){
        if(nv){
          this.selOption=null
          this.selCascder=[]
          console.log('不变？？？',nv)
          this.init()
        }
      }
    },
    created() {
      this.init()
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      init(){
        if(this.selVal !== undefined){
          this.selOption=this.selVal
        }
        if(this.type === 'companyId'){
          this.title='公司'
          this.getCompanyList()
        }else if(this.type === 'departmentId'){
          this.title='部门'
          this.getDepartmentList()
        }else if(this.type === 'categoryId'){
          this.title='产品分类'
          this.getProductCategoryList()
        }else if(this.type ==='goodsTypeId'){
          this.title='商品分类'
          this.getMallGoodsTypeList()
        }else if(this.type ==='state'){
          this.title='商品状态'
          this.list=[
            {name:'未操作',id:0},
            {name:'已上架',id:1},
            {name:'已下架',id:2}
          ]
        }else if(this.type === 'stockInTypeId'){
          this.title='入库类型'
          this.getStockInTypeList()
        }else if(this.type === 'godownEntryState'){
          this.title='入库单状态'
          this.list=[
            {name:'未入库',id:0},
            {name:'已入库',id:1},
          ]
        }else if(this.type === 'stockOutTypeId'){
          this.title='出库类型'
          this.getStockOutTypes()
        }else if(this.type === 'outboundState'){
          this.title='入库单状态'
          this.list=[
            {name:'未出库',id:0},
            {name:'已出库',id:1},
          ]
        }else if(this.type === 'adTypeId'){
          this.title='广告类型'
          this.getAdTypeList()
        }else if(this.type === 'clientId'){
          this.title='客户端'
          this.getClientList()
        }
      },
      getVal(val){
      },
      handleChange(e){
        console.log('选择器----',this.selCascder)
        setTimeout(()=>{
          let tmp={}
          tmp[this.type]=e[e.length-1]
          this.$emit('confirm',tmp)
        },100)
      },
      handleSel(e){
        console.log('选择框---',e)
        let tmp={}
        tmp[this.type]=e
        this.$emit('confirm',tmp)
      },
      getCompanyList(){
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            // console.log('公司列表-------------------------',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentList(){
        this.fetch({name:"getCompanyList"})
          .then(res=>{
            // console.log('公司列表--------',res)
            this.list=[]
            this.getDepartmentByCompany(res)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getDepartmentByCompany(array){
        this.fetch({name:"getDepartmentList",data:{companyId:array[0].id}})
          .then(res=>{
            // console.log('部门列表--------',res)
            if(res.length>0){
              let tmp={name:array[0].companyName,childrens:res,id:array[0].id}
              this.list.push(tmp)
            }
            if(this.selVal !== '空'){
              let index=res.findIndex(r=>r.id === this.selVal)
              if(index >=0){
                this.selCascder=[res[index].companyId,this.selVal]
              }
            }
            array.splice(0,1)
            if(array.length<=0){
              this.props={
                children: 'childrens',
                label: 'name',
                value:'id'
              }
              this.model = 'cascader'
              this.showAll=false
              this.changeOn=false
            }else {
              this.getDepartmentByCompany(array)
            }
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList",data:{storeId:this.department.id}})
          .then(res=>{
            console.log(res)
            this.list=res
            this.props={
              children: 'childrens',
              label: 'name',
              value:'id'
            }
            this.model = 'cascader'
            this.selCascder=[this.selVal]
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getMallGoodsTypeList(){
        this.fetch({name:"getMallGoodsTypeList"})
          .then(res=>{
            console.log(res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockInTypeList(){
        this.fetch({name:"getStockInTypes"})
          .then(res=>{
            console.log('入库类型',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockOutTypes(){
        this.fetch({name:"getStockOutTypes"})
          .then(res=>{
            console.log('出库类型',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getAdTypeList(){
        this.fetch({name:"getAdTypeList"})
          .then(res=>{
            console.log('广告类型',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getClientList(){
        this.fetch({name:"getClientList"})
          .then(res=>{
            console.log('客户端类型',res)
            this.list=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      }
    }
  }
</script>

<style scoped>

</style>
